<template>
	<view class="customer-add-container">
		<view class="form-header">
			<view class="title">📝 {{ isEdit ? '编辑客户' : '新建客户' }}</view>
			<view class="subtitle">请填写客户基本信息，便于后续跟进</view>
		</view>

		<view class="form-card">
			<view class="form-item">
				<view class="form-label">客户姓名</view>
				<u-input v-model="form.customerName" class="form-input" placeholder="例如：张伟" />
			</view>

			<view class="form-item">
				<view class="form-label">联系电话</view>
				<u-input v-model="form.customerPhone" class="form-input" placeholder="11 位手机号" maxlength="11" type="number" />
			</view>

			<view class="form-item">
				<view class="form-label">客户来源</view>
				<picker @change="onSourceChange" :value="sourceIndex" :range="sourceOptions" range-key="label">
					<view class="picker">
						{{ sourceOptions[sourceIndex]?.label || '选择来源渠道' }}
					</view>
				</picker>
			</view>

			<view class="form-item">
				<view class="form-label">客户地址</view>
				<textarea v-model="form.contactAddress" class="form-textarea" placeholder="省市区 + 详细地址" />
			</view>

			<view class="form-item">
				<view class="form-label">备注信息</view>
				<textarea v-model="form.remark" class="form-textarea" placeholder="如：偏好沟通时间、特殊需求等" />
			</view>
		</view>

		<view class="form-footer">
			<button class="btn-cancel" @click="goBack">取消</button>
			<button class="btn-submit" @click="handleSubmit" :loading="saveLoading">保存客户</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { addCustomer, updateCustomer } from '../../api/customers';
import { navBack, setToast } from '../../common/utils';

const isEdit = ref(false);
const saveLoading = ref(false);

const form = reactive({
	customerId: '',
	customerName: '',
	customerPhone: '',
	customerSource: '',
	contactAddress: '',
	remark: ''
});

// 来源选项
const sourceOptions = [
	{ value: 'baidu', label: '线上推广' },
	{ value: '线下渠道', label: '线下渠道' },
	{ value: '转介绍', label: '转介绍' }
];
const sourceIndex = ref(0);

const onSourceChange = (e: any) => {
	sourceIndex.value = e.detail.value;
	form.customerSource = sourceOptions[sourceIndex.value].value;
};

const goBack = () => {
	uni.navigateBack();
};

const handleSubmit = () => {
	if (!form.customerName) {
		setToast('请输入客户姓名');
		return;
	}
	if (!/^1[3-9]\d{9}$/.test(form.customerPhone)) {
		setToast('手机号格式不正确');
		return;
	}
	let fun;
	saveLoading.value = true;
	if (form.customerId) {
		fun = updateCustomer(form);
	} else {
		fun = addCustomer(form);
	}

	fun.then((res) => {
		saveLoading.value = false;
		if (res.code === 200) {
			setToast('保存成功');
			uni.$emit('saveok');
			setTimeout(() => {
				navBack();
			});
		}
	}).catch(() => {
		saveLoading.value = false;
	});
};

onLoad((options) => {
	if (options.customerId) {
		isEdit.value = true;
		Object.assign(form, options);
	}
});
</script>

<style lang="scss" scoped>
.customer-add-container {
	padding: 20px;
	background-color: #f5f7fa;
	min-height: 100vh;
}

.form-header {
	margin-bottom: 24px;
}

.title {
	font-size: 22px;
	font-weight: 700;
	color: #111;
}

.subtitle {
	font-size: 14px;
	color: #666;
	margin-top: 6px;
}

.form-card {
	background: #fff;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.form-item {
	margin-bottom: 20px;
}

.form-label {
	font-weight: 600;
	color: #333;
	margin-bottom: 8px;
	font-size: 15px;
}

.form-input {
	width: 100%;
	padding: 0 16px !important;
	border: 1px solid #ddd;
	box-sizing: border-box;
	border-radius: 12px;
	font-size: 15px;
}

.picker {
	width: 100%;
	padding: 12px 16px !important;
	border: 1px solid #ddd;
	box-sizing: border-box;
	border-radius: 12px;
	font-size: 15px;
	color: #666;
}

.form-textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #ddd;
	border-radius: 12px;
	font-size: 15px;
	height: 80px;
	background-color: #fff;
}

.form-footer {
	display: flex;
	gap: 16px;
	margin-top: 30px;
}

.form-footer button {
	flex: 1;
	padding: 12px 0;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
}

.btn-cancel {
	background: #fff;
	color: #333;
	border: 1px solid #ddd;
}

.btn-submit {
	background: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%);
	color: white;
	border: none;
	box-sizing: border-box;
}
</style>
